<template>
  <div
    :class="ui.modelClass"
    class="full-width row no-wrap"
    style="height: 50px"
  >
    <div class="q-mx-md" style="width: calc(100vw - 50px)">
      <q-input :dark="ui.isDark" class="text-h5" v-model="value" dense readonly>
        <template v-slot:prepend>
          <span :class="ui.isDark ? 'text-white' : 'text-black'">{{
            label
          }}</span>
        </template>
      </q-input>
    </div>
    <!--    <q-btn flat icon="done" style="width: 50px" @click="clickOk"/>-->
    <slot></slot>
  </div>
</template>

<script setup>
import { useUiStore } from "stores/ui";
import { computed } from "vue";

const props = defineProps({
  label: {
    type: String,
  },
  modelValue: {
    type: String,
  },
});

const emit = defineEmits(["ok", "update:modelValue"]);

const ui = useUiStore();
const value = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
// function clickOk () {
//   emit('ok')
// }
</script>

<style scoped></style>
